<template>
    <div class='task-item' @click='dissapear' :class="['task-item',{red:task.checked}] 
"> 
        <div>
            {{ task.name }}
        </div>
        <div @click.stop='remove' class='x'>
            X
        </div>
    </div>
</template>

<script>
    export default {
       props:{
            task:{
                type:Object,
                default:() => ({})
                },
            index:{
                type:Number,
                default:() => 0
            }
        },
        methods:{
                dissapear(){
                    this.$emit('dissapear',this.index)
                },
                remove(){
                    this.$emit('remove',this.index)
                }
        }
    }
</script>

<style scoped>

</style>